<template>
    <div class="dashboard">
        <el-container class="dashboard-container">
            <el-aside width="280px" style="height: 100%">
                <el-menu
                    style="height: 100%"
                    :default-active="activeIndex"
                >
                    <template v-for="item in items">
                        <el-menu-item :index="item.index" :key="item.index">
                            <span slot="title">{{ item.title }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-aside>

            <el-main>
                <div class='setting-container' v-loading="loading">
                    <div class='setting-box' id='userinfo'>
                        <span id='username'>用户名：{{ username }}</span>
                    </div>
                    <div class='setting-box' id='projects'>
                        <el-table :data="projects" style="width: 600px" :header-cell-style="{backgroundColor: '#F3F3F3', height: '56px'}">
                            <el-table-column type="index" width="50"></el-table-column>
                            <el-table-column prop="module" label="参与的项目"></el-table-column>
                            <el-table-column prop="position" label="权限等级" width="100"></el-table-column>
                        </el-table>
                    </div>
                    
                </div>
                
            </el-main>
        </el-container>
    </div>
</template>

<script>
import {userInfo} from "@/api/account";

export default {
    name: 'UserInfo',
    data() {
        return {
            loading: false,
            username: '',
            // 菜单内容
            items: [
                {
                    index: "userinfo",
                    title: "用户个人信息",
                },
                {
                    index: "projects",
                    title: "参与的项目",
                },
            ],
            // 当前选中
            activeIndex: 'userinfo',
            // 表格
            projects: [
                // {
                //     module: 'GRAPES高分辨率确定性预报模式检验模块',
                //     position: '负责人',
                // },
            ]
        };
    },
    created() {
      this.loading = true;
      const username = localStorage.getItem('username');
      this.username = username;
      userInfo(username).then(({data}) => {
        this.projects = data;
      }).finally(() => this.loading = false);
    },
}
</script>

<style lang="scss" scoped>
.setting-box {
    padding: 20px 30px 0 !important;
    border-bottom: none !important;
}
#userinfo {
    #username {
        font-size: 16px;
        font-weight: bolder;
        color: #666666;
    }
}

</style>